<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-30 21:29:17
 * @LastEditors: cxguo
 * @LastEditTime: 2019-12-12 14:13:03
 -->
<template>
  <div>
    <!-- stockTabData: {{ stockTabData }} <br><br>
    stockPostData: {{ stockPostData }} -->
    <el-button v-if="isShowCopybtn" size="small" type="primary" @click="btnBatchCopyStock">
      按照( {{ tabDefaultName }} )批量复制
    </el-button>
    <el-tabs v-model="tabName">
      <el-tab-pane
        v-for="(stockObj,index) in stockTabData"
        :key="index"
        :name="stockObj.label"
      >
        <span slot="label">{{ stockObj.label }}</span>
        <vxe-grid
          ref="table"
          border
          size="small"
          resizable
          highlight-hover-row
          :edit-config="{trigger: 'click', mode: 'row'}"
          :columns="columnsData"
          :data="stockObj.stockData"
        />
      </el-tab-pane>
    </el-tabs></div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { specs } from './mixins'
import clonedeep from 'clonedeep'
import { getOptions } from '@/api/store/store.js'

export default {
  name: 'GoodStock',
  mixins: [oftenuse, specs],
  props: {
    selectSpecsData: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      tabName: null,
      stores: [],
      originColumnsData: [
        { field: 'quantity',
          title: '库存数量', width: 160,
          editRender: { name: 'ElInputNumber', props: { size: 'mini', min: 0 }}
        },
        { field: 'quantityMinWarning',
          title: '最低数预警', width: 160,
          editRender: { name: 'ElInputNumber', props: { size: 'mini', min: 0 }}
        },
        { field: 'quantityMaxWarning',
          title: '最高数预警', width: 160,
          editRender: { name: 'ElInputNumber', props: { size: 'mini', min: 0 }}
        }
      ],
      stockTabData: [],
      ruleValidator: {
      }
    }
  },
  computed: {
    columnsData: function() {
      const originColumnsData = this.originColumnsData || []
      const specsColumns = this.specsColumns
      return [...specsColumns, ...originColumnsData]
    },
    /**
     * 单个仓库的table数据
     */
    stockTableData: function() {
      const spTableData = clonedeep(this.spTableData)
      spTableData.forEach(item => {
        item.quantity = 0 // 商品数量
        item.quantityMinWarning = 10
        item.quantityMaxWarning = 1000
      })
      return spTableData
    },
    /**
     * 多仓库的table数据
     */
    stockTabDataCompu: function() {
      const storeData = this.stores
      const result = []
      storeData.forEach((item, i) => {
        const obj = { value: item.value, label: item.label, stockData: clonedeep(this.stockTableData) }
        result.push(obj)
      })
      return result
    },
    /**
     * 最终可以提交的stock数据
     */
    stockPostData: function() {
      const stockTabData = this.stockTabData
      const result = []
      stockTabData.forEach(item => {
        const storeObj = item // 一个仓库
        const store = { id: storeObj.value, name: storeObj.label }
        const stockList = this.getSingleStoreStockData(storeObj.stockData)
        const singleStoreData = { store, stockList }
        result.push(singleStoreData)
      })
      return result
    },
    tabDefaultName: function() {
      const stores = this.stores
      if (stores.length) {
        return stores[0].label
      }
      return '加载中...'
    },
    isShowCopybtn: function() {
      return this.stores.length !== 1
    }
  },
  watch: {
    'stockTabDataCompu': {
      handler(data) {
        this.stockTabData = data
      },
      immediate: true
    },
    'stores': {
      handler(data) {
        this.tabName = data[0].label
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    btnBatchCopyStock() {
      try {
        this.batchCopyStock()
        this.$message.success('复制成功！')
      } catch (error) {
        console.log(error)
        this.$message.error(`复制失败:${error.message}`)
      }
    },
    batchCopyStock() {
      const stockTabData = this.stockTabData
      const tempData = stockTabData[0].stockData
      stockTabData.forEach(item => {
        item.stockData = clonedeep(tempData)
      })
    },
    initData() {
      getOptions().then(res => {
        if (!res.data.flag) {
          return this.$message.error('获取仓库失败！')
        }
        this.stores = res.data.data
      })
    },
    getSingleStoreStockData(stockData) {
      const result = []
      stockData.forEach(item => {
        const obj = {
          quantity: item.quantity,
          quantityMinWarning: item.quantityMinWarning,
          quantityMaxWarning: item.quantityMaxWarning
        }
        result.push(obj)
      })
      return result
    }
  }
}
</script>
